<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="font-size: 50px;background-color: red;margin-bottom: 50px">
    <p style="font-size: 50%">xxxxxxxxxxxxx</p>
    <p style="font-size: 25px">xxxxxxxxxxxxx</p>
</div>
<div style="background-color: blue;width: 50%;margin: 10px auto;padding: 20px" >

    <p style="text-align: left">
        显示在左侧
    </p>
    <p style="text-align: center">
        显示在中间
    </p>
    <p style="text-align: right">
        显示在右侧
    </p>
    <!--内外边距
    margin xx xx xx xx   上 右 下 左
    margin 50px;    上右下左
    margin 50px 20px; 上下  左右
    margin 10px 50px 10px;   上  左右  下
    -->
</div>
<!--
    边框
    border: 像素 样式 颜色
    样式： solid-实线   dashed-虚线 线段-dotted-虚线，圆点
          double-双层实现

-->
<div style="height: 200px;width: 50%;border: 5px black dashed">

</div>
</body>
</html>